<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/register.css">
</head>

<body>
<video autoplay muted loop id="background-video">
    <source src="video/background.mp4" type="video/mp4">
</video>

<div class="container-login">
    <div class="login-dialog">
        <h3>注册</h3>
        <div class="row">
            <span>用户名</span>
            <input type="text" name="username" id="register-username" required>
        </div>
        <div class="row">
            <span>密码</span>
            <input type="password" name="password" id="register-password" required>
        </div>
        <div class="row">
            <span>确认密码</span>
            <input type="password" name="confirm-password" id="confirm-password" required>
        </div>
        <div class="row">
            <span>验证码</span>
            <div class="captcha-container">
                <input type="text" name="captcha" id="captchaInput" placeholder="请输入验证码" required>
                <img id="captchaImage" src="/captcha/getCaptcha" alt="验证码" onclick="refreshCaptcha()" style="cursor: pointer;">
                <span class="captcha-refresh" onclick="refreshCaptcha()">看不清？点我</span>
            </div>
        </div>
        <div class="row">
            <button id="register-submit" onclick="register()">注册</button>
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script>
    function refreshCaptcha() {
        $('#captchaImage').attr('src', '/captcha/getCaptcha?' + new Date().getTime()); // 刷新验证码
    }

    function register() {
        const username = $("#register-username").val();
        const password = $("#register-password").val();
        const confirmPassword = $("#confirm-password").val();
        const captchaCode = $("#captchaInput").val();

        // 检查用户名和密码是否为空
        if (!username || !password) {
            alert("用户名和密码不能为空！");
            return;
        }

        // 检查密码是否匹配
        if (password !== confirmPassword) {
            alert("密码不匹配！");
            return;
        }

        // 验证验证码
        $.ajax({
            url: "/captcha/checkCaptcha",
            type: "post",
            data: { captchaCode: captchaCode },
            success: function(captchaResult) {
                if (captchaResult.data === false) {
                    alert("验证码错误！");
                    refreshCaptcha(); // 刷新验证码
                    return;
                }

                // 如果验证码正确，继续注册
                $.ajax({
                    url: "/user/register",
                    type: "post",
                    data: {
                        username: username,
                        password: password
                    },
                    success: function(result) {
                        if (result.code === 200 && result.data !== "") {
                            alert("注册成功！请登录。");
                            location.assign("blog_login.html"); // 重定向到登录页面
                        } else {
                            alert(result.errMsg);
                        }
                    }
                });
            }
        });
    }
</script>
</body>

</html>